<template>
  <div v-if="editable">
    <el-upload v-model:file-list="fileList" @success="successUpload" ref="uploader"
               :action="uploadAction" :headers="headers" :show-file-list="false"
               :on-change="handleChange" multiple list-type="picture-card">
      <template #trigger>
        <img :class="imgClass" v-if="isNotEmpty(editSrc)" :src="editSrc" alt="加载中"/>
        <el-icon v-else>
          <Plus/>
        </el-icon>
      </template>
    </el-upload>
  </div>
  <div v-else>
    <img v-if="isNotEmpty(previewSrc)" :class="previewImgClass" :src="previewSrc" alt="加载中"/>
    <user v-else/>
  </div>
</template>
<script setup>
import {computed, onMounted, shallowRef} from 'vue';
import {useStore} from 'vuex';
import {isEmpty, isNotEmpty, real} from '@/utils/CommonUtils';
import {Plus} from '@element-plus/icons-vue';

const props = defineProps({
  modelValue: undefined,
  editable: false,
  circle: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: 'large'
  }
});
const emits = defineEmits(['update:modelValue']);
const fileList = shallowRef([]);
const uploader = shallowRef();
const uploadAction = `${window.baseURL}/sys/attach/upload`;
const headers = {
  'ff-token': undefined,
};
const store = useStore();

onMounted(() => {
  headers['ff-token'] = store.getters['user/userInfo'].token;
});

function handleChange() {

}

function successUpload(response, uploadFile, UploadFiles) {
  if (!response.success) {
    this.$message.warning(response.message);
    uploader.value.handleRemove(uploadFile);
  }

  try {
    UploadFiles = real(UploadFiles);
    fileList.value = [UploadFiles[UploadFiles.length - 1]];
    let attachId = fileList.value[0].response.result.id;
    emits('update:modelValue', attachId);
  } catch (e) {
  }
}

const editSrc = computed(() => {
  if(isEmpty(props.modelValue)) return undefined
  return `${window.baseURL}/sys/attach/download?id=${props.modelValue}&token=${store.getters['user/userInfo'].token}`;
  // if (isEmpty(real(fileList))) {
  //   return undefined;
  // }
  // try {
  //   let uploadFile = real(fileList)[0];
  //   let attachId = uploadFile.response.result.id;
  //   return `${window.baseURL}/sys/attach/download?id=${attachId}&token=${store.getters['user/userInfo'].token}`;
  // } catch (e) {
  // }
  // return undefined;
});

const previewImgClass = computed(() => {
  return {
    [`${props.size}-avatar`]: true,
    'circle-image': props.circle
  };
});
const imgClass = computed(() => {
  return `${props.size}-avatar`;
});

const previewSrc = computed(() => {
  let attachId = store.getters['user/userInfo'].avatar;
  if (isEmpty(attachId)) return undefined;
  return `${window.baseURL}/sys/attach/download?id=${attachId}&token=${store.getters['user/userInfo'].token}`;
});
</script>
<script>
export default {
  name: 'UserAvatar'
};
</script>
<style>
.small-avatar {
  width: 30px;
  height: 30px;
}

.large-avatar {
  width: 150px;
  height: 150px;
}

.middle-avatar {
  width: 120px;
  height: 120px;
}

.avatar-upload-button {
  width: 150px;
  height: 150px;
}

.circle-image {
  border-radius: 1000px;
}
</style>
